<template>
	<view>
		<u-notice-bar :text="noticeText"></u-notice-bar>
		<ywkefu></ywkefu>
		<view class="header" id="header">
			<view class="u-p-20 search">
				<u-search :show-action="false" v-model="params.keywords" action-text="搜索"
					:placeholder="params.type==2?'请输入商品名称/商品条码':'请输入套票名称/套票条码'" :animation="true" margin="20rpx"
					showAction="true" maxlength="30" @click="searchGoodsName()" @clickIcon="searchGoodsName()"
					@search="searchGoodsName()" @custom="searchGoodsName()"></u-search>
				<view class="scan-barcode text-26" @click="qRCodeAdd">扫条码</view>
			</view>
			<view>
				<u-tabs @change="tabs()" lineColor="rgb(96,114,255)" :list="list1" lineHeight="5" lineWidth="30"
					:scrollable="false"></u-tabs>
			</view>
		</view>
		<scroll-view :style="{ height: height + 'px'}" v-if="commodityList.length>0" scroll-y="true"
			:scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="reachBottom">
			<view style="padding-top: 30rpx">
				<u-collapse :value="expand" :border="false">
					<view class="content" v-for="(item, index) in commodityList" :key="index">
						<u-collapse-item :name="item.name" :title="item.name + '（' + item.commodityVoList.length + '）'">
							<view class="item-box" v-for="(item2, index2) in item.commodityVoList" :key="index2"
								@click="enterEdit(item2)">
								<view class="flex">
									<view style="height: 140rpx">
										<u--image v-if="item2.fileName != null && item2.fileName != ''"
											:showLoading="true" :src="imgURL + item2.fileName" width="140rpx"
											height="140rpx">
										</u--image>
										<u--image v-else :showLoading="true"
											:src="staticFileUrl+'/image/common/default_goods_image.svg'" width="140rpx"
											height="140rpx">
										</u--image>
									</view>
									<view class="gift-container">
										<view class="gift-box">
											<text class="text-26 hide">{{item2.name}}</text>
											<text class="text-26-2"
												v-if="item2.retailPrice">￥{{item2.retailPrice}}</text>
										</view>
										<view class="gift-box text-24" v-if="params.type==2">
											<view style="display: flex;flex-wrap: wrap;">
												<text>兑换价:</text>
												<text
													v-if="item2.integralConversionPrice">{{item2.integralConversionPrice}}积分</text>
												<text
													v-if="item2.integralConversionPrice && item2.lotteryConversionPrice">/</text>
												<text
													v-if="item2.lotteryConversionPrice">{{item2.lotteryConversionPrice}}彩票</text>
												<text
													v-if="item2.coinConversionPrice && item2.lotteryConversionPrice">/</text>
												<text><text
														v-if="item2.coinConversionPrice">{{item2.coinConversionPrice}}币</text>
												</text>
											</view>
											<text>
												回收价:<text v-if="item2.recoveryPrice">{{item2.recoveryPrice}}积分</text>
											</text>
										</view>
										<view class="text-24" v-else-if="params.type==3 && item2.playNames">
											<view>包含项目:{{item2.playNames}}</view>
											<view class="u-m-t-10" style="display: flex;flex-wrap: wrap;">
												<text
													v-if="item2.integralConversionPrice || item2.lotteryConversionPrice || item2.coinConversionPrice">兑换价:</text>
												<text
													v-if="item2.integralConversionPrice">{{item2.integralConversionPrice}}积分</text>
												<text
													v-if="item2.integralConversionPrice && item2.lotteryConversionPrice">/</text>
												<text
													v-if="item2.lotteryConversionPrice">{{item2.lotteryConversionPrice}}彩票</text>
												<text
													v-if="item2.coinConversionPrice && item2.lotteryConversionPrice">/</text>
												<text><text
														v-if="item2.coinConversionPrice">{{item2.coinConversionPrice}}币</text>
												</text>
											</view>
										</view>
										<!--                    <view class="gift-box text-24" v-else-if="params.type==3 && item2.commodityProjectVoList.length>0">-->
										<!--                      <view>包含项目:-->
										<!--                        <text v-for="(item3,index3) in item2.commodityProjectVoList" :key="index3">-->
										<!--                          {{item3.name}}{{index3+1==item2.commodityProjectVoList.length?'':'、'}}-->
										<!--                        </text>-->
										<!--                      </view>-->
										<!--                    </view>-->
									</view>
								</view>
							</view>
						</u-collapse-item>
					</view>
				</u-collapse>
			</view>
			<view style="height: 50rpx"></view>
		</scroll-view>
		<u-empty :text="params.type==2?'暂无商品':'暂无套票'" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
			v-else></u-empty>
		<view class="footer" id="footer">
			<view class="u-p-l-30 u-p-r-30 u-m-b-40 u-m-t-20">
				<u-button shape="circle" color="rgb(96,114,255)" :text="params.type==2?'添加商品':'添加套票'"
					@click="navAddGoods()"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				expand: [],
				list1: [{
					id: 1,
					name: '全部',
					api: 'commodity.findByStatus'
				}, {
					id: 2,
					name: '按场地',
					api: 'commodity.findMerchantStore'
				}, {
					id: 3,
					name: '按分组',
					api: 'commodity.findByGroup',
				}],
				id: 1,
				//请求接口
				api: 'commodity.findByStatus',
				imgURL: this.$configPath.imgURL,
				staticFileUrl: this.$configPath.staticFileUrl,
				params: {
					pageNum: 1,
					pageSize: 10,
					totalPage: 1,
					keywords: '',
					type: -1,
				},
				commodityList: [],
				status: 'loading',
				height: 0,
				headerHeight: 0,
				footerHeight: 0,
				noticeText: '当前功能请与【收银系统】搭配使用，点击客服了解详情',
			};
		},
		onReady() {
			this.getPomHeight();
		},
		onLoad(option) {
			if (option.type != null) {
				this.params.type = option.type;
				if (this.params.type == 2) {
					uni.setNavigationBarTitle({
						title: '零售商品'
					})
				} else {
					uni.setNavigationBarTitle({
						title: '游乐套票'
					})
				}
			}
		},
		onShow() {
			this.selectCommodity();
		},
		// 下拉事件
		onPullDownRefresh() {
			this.selectCommodity();
		},
		methods: {
			enterEdit(data) {
				if (this.params.type == 2) {
					uni.navigateTo({
						url: '/pages-commodity/goods-edit2?commodity=' + JSON.stringify(data)
					});
				} else if (this.params.type == 3) {
					uni.navigateTo({
						url: '/pages-commodity/package-ticket/package-ticket?commodity=' + JSON.stringify(data)
					});
				}

			},
			tabs(e) {
				this.commodityList = [];
				this.api = e.api;
				this.id = e.id;
				this.selectCommodity();
			},

			selectCommodity() {
				this.$api(this.api, this.params)
					.then(res => {
						if (res.status == 0) {
							this.commodityList = res.data;
							this.expand = [];
							this.commodityList.forEach(item => {
								if (item.commodityVoList.length > 0) {
									this.expand.push(item.name)
								}
							})
						} else {
							this.$helpers.toast('请求数据失败:' + res.msg);
						}
					})
					.catch(() => {
						uni.stopPullDownRefresh();
					});
			},

			// 获取各个盒子的高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.select('#footer').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})

			},
			// 调用微信扫一扫
			qRCodeAdd() {

				uni.showLoading({
					title: "正在调起...",
					mask: true
				})
				var that = this;
				uni.scanCode({
					success: function(res) {
						uni.hideLoading();
						that.params.keywords = res.result;
						this.selectCommodity();
					},
					fail(res) {
						console.log(res);
						uni.hideLoading();
					}
				});
			},
			//清空关键字
			clear() {
				this.params.keywords = '';
				this.selectCommodity();
			},
			//关键字搜索
			searchGoodsName() {
				this.commodityList = [];
				this.selectCommodity();
			},
			//跳转新增商品页面
			navAddGoods() {
				if (this.params.type == 2) {
					uni.navigateTo({
						url: '/pages-commodity/goods-edit2'
					});
				} else if (this.params.type == 3) {
					uni.navigateTo({
						url: '/pages-commodity/package-ticket/package-ticket'
					});
				}
			},
			//加载更多
			reachBottom() {
				if (this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				this.params.pageNum++;

			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #F7F8F7;
	}
</style>

<style lang="scss" scoped>
	.hide {
		max-width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/deep/ .u-cell__body {
		background-color: #FFFFFF;
	}

	/deep/ .u-cell__body {
		padding: 40rpx 30rpx !important;
	}

	/deep/ .u-collapse-item__content__text {
		background-color: #FFFFFF;
		padding: 0 !important;
	}

	.text-26 {
		color: rgba(0, 0, 0, 0.8);
		font-size: 26rpx;
	}

	.text-26-2 {
		color: rgba(0, 0, 0, 0.5);
		font-size: 26rpx;
	}

	.text-24 {
		color: rgba(0, 0, 0, 0.5);
		font-size: 24rpx;
	}

	.header {
		background-color: #FFFFFF;

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-btn {
				width: 100rpx;
				margin-left: 20rpx;
			}

			.scan-barcode {
				margin-left: 41rpx;
				margin-right: 20rpx;
			}
		}
	}

	.content {
		margin-bottom: 30rpx;

		.detail {
			margin-right: 30rpx;
		}

	}

	.slot-content {
		text-align: center;
	}

	.center {
		text-align: center;
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 100;
	}

	.item-box {
		margin: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 16rpx;
		background-color: #F4FAFF;
		padding: 30rpx;
	}

	.flex {
		width: 100%;
		display: flex;
	}

	.gift-container {
		width: 100%;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.gift-box {
			display: flex;
			justify-content: space-between;
		}

	}

	.font-8-28 {
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.8);
	}

	.font-5-23 {
		color: rgba(0, 0, 0, 0.5);
		font-size: 23rpx;
	}

	.item-right-box {
		display: flex;
		align-items: center;
	}

	.edit-box {
		background: rgb(240, 240, 240);
		color: rgba(0, 0, 0, 0.9);
		border-radius: 6rpx;
		padding: 5rpx 20rpx;
		font-size: 23rpx;
	}

	.del-box {
		background: rgb(254, 64, 76);
		color: #FFFFFF;
		border-radius: 6rpx;
		padding: 5rpx 20rpx;
		font-size: 23rpx;
	}
</style>
